<template>
	<view class="login">
		<image class="login__logo" src="/static/logo-main.png" mode="aspectFit"></image>
		<view class="login__form">
			<u-field class="login__form__input" v-model="username" placeholder="手机号码" :label-width="0">
			</u-field>
			<u-field class="login__form__input" v-model="password" placeholder="密码" :label-width="0" :password="true">
			</u-field>
			<u-button class="login__form__button" type="primary" @click="login()">登录</u-button>
			<view class="login__form__func">
				<a>忘记密码？</a>
				<a>注册</a>
			</view>
			<view class="login__tripartite">
				<u-divider fontSize="28" color="#333">第三方登录</u-divider>
				<view class="login__tripartite__content">
					<image class="login__tripartite__logo" src="/static/login/msg.svg" mode="aspectFit"></image>
					<image class="login__tripartite__logo" src="/static/login/qq.svg" mode="aspectFit"></image>
					<image class="login__tripartite__logo" src="/static/login/wechat.svg" mode="aspectFit"></image>
				</view>
			</view>
			<a class="login__notice">登录即视为您已同意<br />
				《云链智谷App使用协议》《用户隐私保护协议》内容</a>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				username: '',
				password: '',
			}
		},
		onLoad() {

		},
		onLoad() {

		},
		methods: {
			login() {
				console.log("123")
				uni.switchTab({
					url: '/pages/core/index/index'
				})
				console.log("123")
			}
		}
	}
</script>
<style lang="scss" scoped>
	a {
		color: $uni-text-color-placeholder;
	}
</style>
<style lang="less" scoped>
	.login {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		&__logo {
			height: 200rpx;
			margin-top: 100rpx;
			margin-left: auto;
			margin-right: auto;
			margin-bottom: 60rpx;
		}

		&__form {
			display: flex;
			flex-direction: column;
			justify-content: center;

			&__input {
				margin-bottom: 30rpx;
			}

			&__button {
				margin-top: 30rpx;
				margin-left: 0rpx;
				margin-right: 0rpx;
			}

			&__func {
				width: 100%;
				margin-top: 30rpx;
				display: flex;
				justify-content: space-between;
			}
		}

		&__tripartite {
			margin-top: 120rpx;

			&__content {
				margin-top: 30rpx;
				margin-bottom: 30rpx;
				display: flex;
				flex-direction: row;
				justify-content: center;
			}

			&__logo {
				width: 90rpx;
				height: 90rpx;
				margin-left: 50rpx;
				margin-right: 50rpx;
			}
		}

		&__notice {
			margin-top: 30rpx;
			text-align: center;
		}
	}
</style>
